<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Code Behind | Raxan User Guide</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad('javascript','html','php');
    </script>

</head>

<body>
    <div class="container c48 prepend-top">
        <h2 class="bottom">Raxan User Guide</h2>
        <div class="navbar">
            <div class="lf"><div class="rt"><div class="md">
                <ul>
                    <li><a href="../index.html" title="The Rich Ajax, CSS &amp; PHP Framework" >Home</a></li>
                    <li><a href="table-of-contents.html" title="Blog Posts" >Table Of Contents</a></li>
                    <li><a href="../php-examples/index.php" title="PHP Examples" >PHP Examples</a></li>
                    <li><a href="../css-examples/index.html" title="User Guide" >CSS Examples</a></li>
                </ul>
            </div></div></div>
        </div>
        <div class="prepend1 append1">
            <div class="ltm" align="right">
                <a href="table-of-contents.html" title="Show Table of Content">
                    <img src="images/toc-button.png"  alt="Table of Contents" />
                </a>
            </div>
            <h2>Creating a Code-Behind Javascript file</h2>

<p>Raxan includes a very nice feature that lets you automatically include a JavaScript inside your web page without having to add an extra &lt;script&gt;tag. This makes it much easier and cleaner when working with a lot of script files inside your web page.</p>

<p>To create a code-behind script, you simply create a Javascript file with the same name as the html page you're loading but without the html extension. For example, mywebpage.js will become the code-behind file for the web page mywebpage.html.</p>

<p>To include your code-behind Javascript file inside your web page, you only need to add one script tag and that is the tag that will be used to load the Raxan startup.js file:</p>

<pre><code>&lt;script src="raxan/startup.js" type="text/javascript"&gt;/-/&lt;/script&gt;
</code></pre>

<p>Note the /-/ characters between the <scrip> tags. These characters will instruct Raxan to automatically load the code-behind file relative to the path of the web page. If your code-behind file is located inside a sub folder (e.g. scripts/), then you can add the folder path as follows:</p>

<pre><code>&lt;script src="raxan/startup.js" type="text/javascript"&gt;/scripts/-/&lt;/script&gt;
</code></pre>

<p>From within your Javascript file you can include just about any other script or CSS file.</p>

<p>Embedding Javascript inside a web page
Another cool feature for the framework is the ability to embed your Javascript code inside your web page without having to use a second script block:</p>

<pre><code>&lt;script src="raxan/startup.js" type="text/javascript"&gt;
    html.include('jquery');

    html.ready(function(){
        alert('The page is now ready for DOM manipulation');
    });
&lt;/script&gt;
</code></pre>

<p>In the above example, both the raxan/startup.js and the embedded Javascript codes are executed using only one &lt;script&gt; block.</p>

<h3>Loading a Code-Behind script from PHP</h3>

<p>To load a code-behind JavaScript script from from php use the loadScriptBehind() method:</p>

<pre><code>&lt;?php

    require_once 'raxan/pdi/autostart.php';

    class NewPage extends RaxanWebPage {

        protected function _init() {
            $this-&gt;loadScriptBehind('/-/'); 
            // ... do something ...
        }

    }

?&gt;
</code></pre>

        </div>
        <div class="tpb pad" style="text-align:right">
            <div class="right ltm">
                <a href="table-of-contents.html" title="Back to Table of Content">
                    <img src="images/toc-button.png"  alt="Table of Contents" />
                </a>
            </div>
        </div>
    </div>
</body>

</html>

